<template>
	<view style="position: relative;"> 
		<view class="row-between-center search-bg" style="">
			<u-input class="input" prefixIcon="search" placeholder="搜索采购商" border="none"  prefixIconStyle="margin-left:26rpx">
				<template slot="suffix">
					<view class="search row-center">
						搜索
					</view>
				</template>
			</u-input>
		</view>
		
		<view class="row">
			<view class="step col" >
				<view class="row-center" :class="index==stepIndex?'step-status':'step-status-n'" v-for="item,index in stepList" style="white-space:pre-wrap;width: 128rpx;" @click="changeStep(index)">
					{{item.name}}
				</view>
			</view>
			<view class="col" style="width: 100%;"> 
				<view class="row item" v-for="item,index in goodsList" style="width: 100%;">
					<image class="item-img" src="/static/images/oil.png">
					</image>
					<view class="col" style="width: 100%;">
						<view class="item-name">5S 压榨一级 花生油 5L</view>
						<view class="row-between-center">
							<view class="item-price">¥2000</view>
							<view class="row-w-center" v-if="item.type==0">
								<image src="/static/images/cancel.png" class="item-add" @click="cancel(index)" v-if="item.num>0"></image>
								<view class="item-num" v-if="item.num>0">{{item.num}}</view>
								<image src="/static/images/add.png" class="item-add" @click="add(index)"></image>
							</view>
							<view v-else class="item-scale row-center">
									<u-badge  max="99" :value="3"   :offset=[-5,0] :absolute="true"></u-badge>
								选规格
							</view>
						</view>
					</view>
					
				</view>
			</view>
		</view>
		
		<view class="bottom row-between-center">
				<view class="total-price">
					<span class="total">合计：</span>¥2000
				</view>
			<view class="sure row-center">确定</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				stepIndex:0,
				stepList:[
					{'name':'全部'},
						{'name':'花生油'},	{'name':'花生油'},	{'name':'花生油'},	{'name':'花生油'},
						{'name':'花生油'},	{'name':'花生油'},	{'name':'花生油'},	
				],
				goodsList:[
					{
						type:0,
						num:0
					},
					{
						type:1,
						num:0
					},
					{
						type:1,
						num:0
					},
				]
			}
		},
		methods: {
			changeStep(index){
				this.stepIndex = index
			},
			add(index){
				this.goodsList[index].num =this.goodsList[index].num *1+1	
			},
			cancel(index){
				this.goodsList[index].num =this.goodsList[index].num *1-1	
			}
		}
	}
</script>

<style scoped lang="scss">
	.bottom{
		width: 100%;
		position: fixed;
		bottom: 0;
		height: 88rpx;
		padding-left: 20rpx;
		padding-right: 36rpx;
		.total{
			color:  #6A6876;
			font-size: 20rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 40rpx; /* 200% */
		}
		.total-price{
			color: #F5222D;
			font-size: 32rpx;
			font-style: normal;
			font-weight: 700;
			line-height: 44rpx; /* 137.5% */
		}
		.sure{
			width: 176rpx;
			height: 68rpx;
			flex-shrink: 0;
			border-radius: 40rpx;
			background: #3B60D3;
			color: #FFF;
			font-size: 28rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 44rpx; /* 157.143% */
		}
	}
	.item{
		padding: 30rpx;
		border-bottom: 1rpx solid  #E4E8FC;;
		.item-img{
			width: 100rpx;
			height: 100rpx;
			flex-shrink: 0;
		}
		.item-name{
			color:  #20252B;
			font-size: 24rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 40rpx; /* 166.667% */
		}
		.item-price{
			color: #F5222D;
			font-size: 28rpx;
			font-style: normal;
			font-weight: 700;
			line-height: 40rpx; /* 142.857% */
		}
		.item-add{
			width: 44rpx;
			height: 44rpx;
		}
		.item-num{
			margin-left: 30rpx;
			margin-right: 30rpx;
			color:  #20252B;
			font-size: 28rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 44rpx; /* 157.143% */
		}
		.item-scale{
			position: relative;
			width: 88rpx;
			height: 44rpx;
			flex-shrink: 0;
			border-radius: 8rpx;
			background:  #3B60D3;
			color: #FFF;
			font-size: 20rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 36rpx; /* 180% */
		}
		
	}
		.box{
			width: 100px; 
			height: 100px;
			background-color: #909193;
			border-radius: 15px;
		}
	.step{
		margin-left: 20rpx;
		.step-status{
			margin-top: 20rpx;
			height: 96rpx;
			width: 128rpx;
			border-radius: 12rpx;
			background: #3B60D3;
			flex-shrink: 0;
			color: #FFF;
			text-align: center;
			font-size: 22rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 28rpx; /* 127.273% */
		}
		.step-status-n{
			margin-top: 20rpx;
			height: 96rpx;
			width: 128rpx;
			border-radius: 12rpx;
			border: 1rpx solid rgba(0, 0, 0, 0.20);
			background: #F2F3F8;
			width: 64rpx;
			color: #20252B;
			text-align: center;
			font-size: 22rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 28rpx; /* 127.273% */
		}
		
	}
	
	.input {
		margin-top: 20rpx;
		height: 60rpx;
		flex-shrink: 0;
		border-radius: 8rpx;
		background: #F6F7FB;
	}

	.search {
		color: #FFF;
		font-size: 20rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 36rpx;
		/* 180% */
		width: 88rpx;
		height: 48rpx;
		flex-shrink: 0;
		border-radius: 8rpx;
		background: #3B60D3;
	}
	.search-bg{
		padding: 20rpx;
		border-radius: 0px 0px 6px 6px;
		background: #FFF;
		box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.08);
	}
</style>
